<template>
  <!--用户管理 添加机构-->
  <section class="component add-organize">
    <el-form :rules="addOrganizeRules" :model="addOrgModel" ref="addOrg" label-width="100px">
      <el-form-item label="机构代码" prop="deptNo">
        <el-input v-model.trim="addOrgModel.deptNo" size="small" :maxlength="20" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item label="机构名称" prop="deptName">
        <el-input v-model.trim="addOrgModel.deptName" size="small" :maxlength="20" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item label="状态 ">
        <el-select v-model="addOrgModel.deptStatus" size="small">
          <el-option v-for="{code,name,index} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构描述">
        <el-input type="textarea" v-model.trim="addOrgModel.description" :autosize="{ minRows:2, maxRows:4}" :maxlength="200" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="维护人：">
        {{userData.realName}}
      </el-form-item>
      <el-form-item label="最后维护时间：">
        {{addOrgModel.time}}
      </el-form-item>
      <el-form-item label-width="0px">
        <el-row type="flex" justify="center">
          <el-button @click="close()">取消</el-button>
          <el-button @click="addOrganizeCommit">确定</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </section>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { State, Getter } from 'vuex-class';
import { format as DateFormat } from "date-fns";
import { DepartmentService } from '~/services/management-service/department.service';
import { CompanyService } from '~/services/management-service/company.service';
import CommissionSet from '~/components/case-import/client-manage/commission-set.vue'

@Component({
  components: {
    CommissionSet
  },
})
export default class AddOrganize extends Vue {
  @Dependencies(DepartmentService)
  private departmentService: DepartmentService;
  @Dependencies(CompanyService)
  private companyService: CompanyService;
  @State
  private companyList: any;
  @Getter
  private isSupperAdmin: boolean;
  @State
  private principalList: any;
  @State
  private userData

  private addOrgModel: any = {
    deptNo: '',
    deptName: '',
    description: '',
    parentId: '1',
    deptStatus: 'ENABLED',
    time: ''
  };
  private commissionData: any = []

  /**
   * 添加机构信息校验规则
   */
  private addOrganizeRules: any = {
    deptName: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
    deptNo: [{ required: true, message: '请输入机构代码', trigger: 'blur' },
      { pattern: /^[A-Za-z0-9]+$/, message: "请输入英文字母或数字", trigger: "blur" }
    ],
  };

  /**
   * 关闭窗口
   */
  public close () {
    const form: any = this.$refs['addOrg'];
    form.resetFields();
    this.$emit('close');

  }

  public refresh (adddata) {
    if (!adddata) {
      return;
    }
    this.addOrgModel.parentId = adddata.id;
  }

  private mounted () {
    this.addOrgModel.time = DateFormat(Date.now(), "YYYY-MM-DD HH:mm:ss")
  }
  /**
   * 添加机构确认
   */
  private addOrganizeCommit () {
    const form: any = this.$refs['addOrg'];
    form.validate((valid) => {
      if (valid) {
        this.departmentService.createDepartment(this.addOrgModel).subscribe(
          (data) => {
            this.$message.success('新增机构成功');
            this.$emit('refresh');
            this.close();
          }
        );
      }
    });
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.data-grid {
  margin-bottom: 10px;
}

.header {
  border: solid 1px #dee1e5;
  border-bottom: 0px;
  height: 40px;
  line-height: 40px;
}
.el-select-dropdown__item.selected {
  font-weight: normal;
}
</style>
